import { Card, Space } from 'antd';
import React from 'react';
import Loading from './loading'
import Link from 'components/ZLink';
import Height from './height'
const tabList = [
    {
        key: 'loading',
        tab: 'loading动画'
    },
    {
        key: 'height',
        tab: 'height动画'
    }
]
export default () => {
    const [activeKey, setActiveKey] = React.useState('loading')
    
    const tabComponentList: any = {
       loading: <Loading />,
       height: <Height />
    }
    return (
        <Space direction="vertical" style={{ width: '100%' }}>
            <Card title="相关连接">
                <Link href="https://github.com/chokcoco/iCSS" label="css动画" />
                <Link href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties" label="transition支持的属性" />
            
            </Card>
            <Card title="注意事项">
                CSS transtion 不支持元素的高度或者宽度为 auto 的变化。
            </Card>
            <Card
                tabList={tabList}
                activeTabKey={activeKey}
                onTabChange={key => setActiveKey(key)}
            >
                {tabComponentList[activeKey]}
            </Card>
        </Space>
    )
}